<script setup lang="ts">
// 如果需要props或emit可以在这里定义
</script>

<template>
    <footer class="footer">
        <div class="footer-content">
            <!-- 主要链接 -->
            <div class="footer-links">
                <div class="link-group">
                    <h4>关于我们</h4>
                    <a href="/about">公司介绍</a>
                    <a href="/contact">联系我们</a>
                    <a href="/join">招贤纳士</a>
                </div>
                <div class="link-group">
                    <h4>帮助中心</h4>
                    <a href="/help">使用指南</a>
                    <a href="/faq">常见问题</a>
                    <a href="/feedback">意见反馈</a>
                </div>
                <div class="link-group">
                    <h4>商务合作</h4>
                    <a href="/business">商务洽谈</a>
                    <a href="/advertise">广告投放</a>
                    <a href="/partner">合作伙伴</a>
                </div>
            </div>

            <!-- 联系信息 -->
            <div class="contact-info">
                <div class="contact-item">
                    <i class="fa fa-phone"></i>
                    <span>客服电话：400-660-0108</span>
                </div>
                <div class="contact-item">
                    <i class="fa fa-envelope"></i>
                    <span>邮箱：kefu@csdn.net</span>
                </div>
                <div class="contact-item">
                    <i class="fa fa-clock"></i>
                    <span>工作时间：8:30-22:00</span>
                </div>
            </div>

            <!-- 备案信息 -->
            <div class="footer-bottom">
                <div class="beian-info">
                    <span>公安备案号110105020301143</span>
                    <span>京ICP备19004658号</span>
                    <span>京网文（2020）1039-165号</span>
                </div>
                <div class="copyright">
                    ©1999-2025北京创新乐知网络技术有限公司
                </div>
                <div class="additional-links">
                    <a href="/privacy">隐私政策</a>
                    <a href="/terms">服务条款</a>
                    <a href="/copyright">版权声明</a>
                    <a href="/report">举报中心</a>
                </div>
            </div>
        </div>
    </footer>
</template>

<style lang="scss" scoped>
.footer {
    background-color: #f8f9fa;
    padding: 20px 0 10px;
    color: #666;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-links {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 20px;
}

.link-group {
    display: flex;
    flex-direction: column;
    gap: 8px;

    h4 {
        color: #333;
        font-size: 14px;
        margin-bottom: 4px;
    }

    a {
        color: #666;
        text-decoration: none;
        font-size: 12px;
        transition: color 0.2s;

        &:hover {
            color: #1890ff;
        }
    }
}

.contact-info {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
    padding: 10px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;

    i {
        color: #999;
        font-size: 12px;
    }
}

.footer-bottom {
    text-align: center;
    font-size: 12px;
}

.beian-info {
    margin-bottom: 8px;

    span {
        margin: 0 8px;
        color: #999;
        font-size: 12px;
    }
}

.copyright {
    color: #999;
    margin-bottom: 8px;
    font-size: 12px;
}

.additional-links {
    a {
        color: #666;
        text-decoration: none;
        margin: 0 8px;
        font-size: 12px;
        transition: color 0.2s;

        &:hover {
            color: #1890ff;
        }
    }
}

@media (max-width: 768px) {
    .footer-links {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .contact-info {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .beian-info span {
        display: block;
        margin: 4px 0;
    }

    .additional-links a {
        display: inline-block;
        margin: 4px;
    }
}
</style> 